{% extends "otree/Page.html" %}
{% load otree static %}

{% block global_styles %}
{% endblock %}

{% block global_scripts %}
{% endblock %}

{% block body_main %}
    {% block progress %}

        <nav class="navbar navbar-light bg-light justify-content-between fixed-top">
            <div class="navbar-nav flex-grow-1 mx-1">
                <div class="progress " style="height: 30px;">
                    <div class="progress-bar" role="progressbar" style="width: {{ progress }}%"
                         aria-valuenow="{{ progress }}"
                         aria-valuemin="0" aria-valuemax="100">
                        <b> {{ progress }}%</b></div>
                </div>
            </div>
            {% if instructions %}


                <div class="mx-1">
                    <button class="btn   btn-success" data-bs-toggle="modal" data-bs-target="#instructionsModal">
                        Инструкции
                    </button>
                </div>



            {% endif %}
        </nav>
    {% endblock %}
    {% if instructions %}
        <!-- Modal -->
        <div class="modal fade" id="instructionsModal" tabindex="-1" aria-labelledby="exampleModalLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Инструкции</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        {% include 'polar/includes/dg_instructions.html' %}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>

                    </div>
                </div>
            </div>
        </div>


    {% endif %}
    {{ super() }}
    {% include 'global/footer.html' %}
{% endblock %}

